@wordpress/dom
Advanced tools
DOM utilities module for WordPress.
Install the module
npm install @wordpress/dom --save
# computeCaretRect
Get the rectangle for the selection in a container.
Parameters
Window: The window of the selection.Returns
DOMRect | null: The rectangle.# documentHasSelection
Check whether the current document has a selection. This checks for both focus in an input field and general text selection.
Parameters
Document: The document to check.Returns
boolean: True if there is selection, false if not.# documentHasTextSelection
Check whether the current document has selected text. This applies to ranges of text in the document, and not selection inside and elements.
See: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection#Related_objects.
Parameters
Document: The document to check.Returns
boolean: True if there is selection, false if not.# documentHasUncollapsedSelection
Check whether the current document has any sort of selection. This includes ranges of text across elements and any selection inside and
elements. _Parameters_ - _doc_ `Document`: The document to check. _Returns_ - `boolean`: Whether there is any sort of "selection" in the document. <a name="focus" href="#focus">#</a> **focus** Object grouping `focusable` and `tabbable` utils under the keys with the same name. <a name="getFilesFromDataTransfer" href="#getFilesFromDataTransfer">#</a> **getFilesFromDataTransfer** Gets all files from a DataTransfer object. _Parameters_ - _dataTransfer_ `DataTransfer`: DataTransfer object to inspect. _Returns_ - `File[]`: An array containing all files. <a name="getOffsetParent" href="#getOffsetParent">#</a> **getOffsetParent** Returns the closest positioned element, or null under any of the conditions of the offsetParent specification. Unlike offsetParent, this function is not limited to HTMLElement and accepts any Node (e.g. Node.TEXT_NODE). _Related_ - <https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent> _Parameters_ - _node_ `Node`: Node from which to find offset parent. _Returns_ - `Node | null`: Offset parent. <a name="getPhrasingContentSchema" href="#getPhrasingContentSchema">#</a> **getPhrasingContentSchema** Get schema of possible paths for phrasing content. _Related_ - <https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content> _Parameters_ - _context_ `[string]`: Set to "paste" to exclude invisible elements and sensitive data. _Returns_ - `Partial<ContentSchema>`: Schema. <a name="getRectangleFromRange" href="#getRectangleFromRange">#</a> **getRectangleFromRange** Get the rectangle of a given Range. _Parameters_ - _range_ `Range`: The range. _Returns_ - `DOMRect`: The rectangle. <a name="getScrollContainer" href="#getScrollContainer">#</a> **getScrollContainer** Given a DOM node, finds the closest scrollable container node. _Parameters_ - _node_ `Element | null`: Node from which to start. _Returns_ - `Element | undefined`: Scrollable container node, if found. <a name="insertAfter" href="#insertAfter">#</a> **insertAfter** Given two DOM nodes, inserts the former in the DOM as the next sibling of the latter. _Parameters_ - _newNode_ `Node`: Node to be inserted. - _referenceNode_ `Node`: Node after which to perform the insertion. _Returns_ - `void`: <a name="isEmpty" href="#isEmpty">#</a> **isEmpty** Recursively checks if an element is empty. An element is not empty if it contains text or contains elements with attributes such as images. _Parameters_ - _element_ `Element`: The element to check. _Returns_ - `boolean`: Whether or not the element is empty. <a name="isEntirelySelected" href="#isEntirelySelected">#</a> **isEntirelySelected** Check whether the contents of the element have been entirely selected. Returns true if there is no possibility of selection. _Parameters_ - _element_ `HTMLElement`: The element to check. _Returns_ - `boolean`: True if entirely selected, false if not. <a name="isHorizontalEdge" href="#isHorizontalEdge">#</a> **isHorizontalEdge** Check whether the selection is horizontally at the edge of the container. _Parameters_ - _container_ `Element`: Focusable element. - _isReverse_ `boolean`: Set to true to check left, false for right. _Returns_ - `boolean`: True if at the horizontal edge, false if not. <a name="isNumberInput" href="#isNumberInput">#</a> **isNumberInput** Check whether the given element is an input field of type number and has a valueAsNumber _Parameters_ - _node_ `Node`: The HTML node. _Returns_ - `node is HTMLInputElement`: True if the node is input and holds a number. <a name="isPhrasingContent" href="#isPhrasingContent">#</a> **isPhrasingContent** Find out whether or not the given node is phrasing content. _Related_ - <https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content> _Parameters_ - _node_ `Node`: The node to test. _Returns_ - `boolean`: True if phrasing content, false if not. <a name="isTextContent" href="#isTextContent">#</a> **isTextContent** _Parameters_ - _node_ `Node`: _Returns_ - `boolean`: Node is text content <a name="isTextField" href="#isTextField">#</a> **isTextField** Check whether the given element is a text field, where text field is defined by the ability to select within the input, or that it is contenteditable. See: <https://html.spec.whatwg.org/#textFieldSelection> _Parameters_ - _node_ `Node`: The HTML element. _Returns_ - `element is HTMLElement`: True if the element is an text field, false if not. <a name="isVerticalEdge" href="#isVerticalEdge">#</a> **isVerticalEdge** Check whether the selection is vertically at the edge of the container. _Parameters_ - _container_ `Element`: Focusable element. - _isReverse_ `boolean`: Set to true to check top, false for bottom. _Returns_ - `boolean`: True if at the vertical edge, false if not. <a name="placeCaretAtHorizontalEdge" href="#placeCaretAtHorizontalEdge">#</a> **placeCaretAtHorizontalEdge** Places the caret at start or end of a given element. _Parameters_ - _container_ `HTMLElement`: Focusable element. - _isReverse_ `boolean`: True for end, false for start. - _mayUseScroll_ `[boolean]`: Whether to allow scrolling. <a name="placeCaretAtVerticalEdge" href="#placeCaretAtVerticalEdge">#</a> **placeCaretAtVerticalEdge** Places the caret at the top or bottom of a given element. _Parameters_ - _container_ `HTMLElement`: Focusable element. - _isReverse_ `boolean`: True for bottom, false for top. - _rect_ `[DOMRect]`: The rectangle to position the caret with. - _mayUseScroll_ `[boolean]`: True to allow scrolling, false to disallow. <a name="remove" href="#remove">#</a> **remove** Given a DOM node, removes it from the DOM. _Parameters_ - _node_ `Node`: Node to be removed. _Returns_ - `void`: <a name="removeInvalidHTML" href="#removeInvalidHTML">#</a> **removeInvalidHTML** Given a schema, unwraps or removes nodes, attributes and classes on HTML. _Parameters_ - _HTML_ `string`: The HTML to clean up. - _schema_ `import('./clean-node-list').Schema`: Schema for the HTML. - _inline_ `boolean`: Whether to clean for inline mode. _Returns_ - `string`: The cleaned up HTML. <a name="replace" href="#replace">#</a> **replace** Given two DOM nodes, replaces the former with the latter in the DOM. _Parameters_ - _processedNode_ `Element`: Node to be removed. - _newNode_ `Element`: Node to be inserted in its place. _Returns_ - `void`: <a name="replaceTag" href="#replaceTag">#</a> **replaceTag** Replaces the given node with a new node with the given tag name. _Parameters_ - _node_ `Element`: The node to replace - _tagName_ `string`: The new tag name. _Returns_ - `Element`: The new node. <a name="unwrap" href="#unwrap">#</a> **unwrap** Unwrap the given node. This means any child nodes are moved to the parent. _Parameters_ - _node_ `Node`: The node to unwrap. _Returns_ - `void`: <a name="wrap" href="#wrap">#</a> **wrap** Wraps the given node with a new node with the given tag name. _Parameters_ - _newNode_ `Element`: The node to insert. - _referenceNode_ `Element`: The node to wrap. <!-- END TOKEN(Autogenerated API docs) --> <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." />FAQs
DOM utilities module for WordPress.
The npm package @wordpress/dom receives a total of 110,397 weekly downloads. As such, @wordpress/dom popularity was classified as popular.
We found that @wordpress/dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 23 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.